const React = require('react');
const ReactDOM = require('react-dom');
const Tooltip = require('Tooltip');
const Button = require('Button');
const Tile = require("../Tile");
const BindTooltip = require("mixins/BindTooltip");

let Page = React.createClass({

    mixins: [BindTooltip],

    componentDidMount(){

    },

    show(){
        this.refs.tooltip6.show();
    },

    hide(){
        this.refs.tooltip6.hide();
    },

    render() {

        return (
            <div className="container">
                <Tile header={"使用方式"}>
                    <pre className="brush: js" ref="code">
                        {
                            `

`
                        }
                    </pre>
                </Tile>
                <Tile header={"基本使用方式"}>
                    <Tooltip title="Title Text" delay={200} trigger={"click"}>
                        <a href="javascript:void(0)">TOP</a>
                    </Tooltip>

                    <div className="mt-15"></div>

                    <Tooltip title="Title Text" align="topRight" theme="default">
                        <a href="javascript:void(0)">topRight</a>
                    </Tooltip>

                    <div className="mt-15"></div>

                    <Tooltip title="Title Text" align="bottom">
                        <a href="javascript:void(0)">bottom</a>
                    </Tooltip>

                    <div className="mt-15"></div>

                    <Tooltip title="Title Text" align="topLeft">
                        <a href="javascript:void(0)">topLeft</a>
                    </Tooltip>

                    <div className="mt-15"></div>

                    <Tooltip title="Title Text" align="bottomRight">
                        <a href="javascript:void(0)">bottomRight</a>
                    </Tooltip>
                    <div className="mt-15"></div>
                    <Tooltip title="Title Text" align="bottomLeft">
                        <a href="javascript:void(0)">bottomLeft</a>
                    </Tooltip>

                    <div className="mt-15"></div>
                    <Tooltip title="Title Text" align="left" theme="default">
                        <a href="javascript:void(0)">left</a>
                    </Tooltip>

                    <div className="mt-15"></div>
                    <Tooltip title="Title Text" align="leftTop" theme="primary">
                        <a href="javascript:void(0)">leftTop</a>
                    </Tooltip>

                    <div className="mt-15"></div>
                    <Tooltip title="Title Text" align="leftBottom">
                        <a href="javascript:void(0)">leftBottom</a>
                    </Tooltip>



                    <div className="mt-15"></div>
                    <Tooltip title="Title Text" align="right" theme="error">
                        <a href="javascript:void(0)">right</a>
                    </Tooltip>

                    <div className="mt-15"></div>
                    <Tooltip title="Title Text" align="rightTop">
                        <a href="javascript:void(0)">rightTop</a>
                    </Tooltip>

                    <div className="mt-15"></div>
                    <Tooltip title="Title Text" align="rightBottom" offsetEle=".desktop-wrap">
                        <a href="javascript:void(0)">rightBottom</a>
                    </Tooltip>

                    <div style={{height: 500}}></div>
                </Tile>
            </div>
        )
    }
});

module.exports = Page;